iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
5
Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列 第 18

:first-letter 首字選取器 - 玩轉首字設計的好功能

  • 分享至 

  • xImage
  •  

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧


首字放大在平面設計的領域中是經常可見的一種設計手法,也是司空見慣的方式了,不管是報章雜誌還是海報傳單都可以見到首字放大的設計風格,但是在網頁上面呢?好像不是這麼常見?事實上並不是不常見,而是你可以看的網頁太少了,其實在國外這樣的設計不算少見,反倒在國內比較少看到有這樣設計的網站,Amos 猜想大概是這個選取器太少用接觸了,又或者是網頁上面不盛行這樣的設計手法,不管如何,我個人是覺得這樣的設計其實蠻能夠聚焦的。

首字放大的問題

首字放大選取器的語法就是在目標上設定 ::first-letter,像是這樣 p::first-letter ,在早期微軟的 IE 盛行的時代寫法會是 :first-letter,這樣看來應該是個僞類選取器,但實際上後面已更正為雙冒號的僞元素,在實作首字放大時我們會遇到首字放大了,但是卻出現排列效果不佳的狀況,例如以下原始碼

HTML

<p>
Amos 每次挑戰鐵人賽都一次挑戰兩個主題,曾經有人問 Amos 說,為什麼你不一次挑戰一個就好,挑戰兩個不是比較累嗎?況且挑戰鐵人賽又沒有錢,為什麼要這樣挑戰連續三十天發文不中斷?我心想你一定是個很自律的人,所以不用靠鐵人挑戰逼迫自己寫點東西來,另外挑戰雙主題的問題啊,如果今天有兩個主題給你挑,你會想要挑哪一個?傻瓜!小孩子才做選擇,我當然是全都要啊(咦)
</p>
<p>
因為假文的內容實在太難看了,所以我花了一點時間打了這一段廢話,廢話看起來會更像正常的對話,我都這麼有誠意有耐心地把字打完了,你還不訂閱我的文章就太說不過去了,不果獎真的你可以看到這邊也表示妳很有耐心,給你鼓掌一下,然後...訂閱文章給他按下去,知道嗎!那我到底打那麼多字的真正原因是什麼呢?其實我只是想要讓第一個字有中文跟英文的對照可以讓你看而已。
</p>

CSS

p{
  font-size: 16px;
  line-height: 1.7;
}
p:first-letter{
	font-size:50px;
}

因為首字放大了,但是他的垂直對齊位置依舊是文字基線,所以沒有出現我們預想的那種平面設計的視覺排版外觀,要達到平面設計的首字放大效果,我們必須多加幾行原始碼,要讓首字具備有文繞圖的功能,這樣才能讓視覺看起來開始像是平面設計會看到的樣子

CSS

p{
  font-size: 16px;
  line-height: 1.7;
}
p::first-letter{
  font-size:48px;
  float: left;
  line-height: .7;
  margin: .2em;
}

恩~樣子開始有點像囉,在這個例子中為了讓各位可以看到中英文在首字放大中的視覺效果,所以用了兩段文字給各位看,實際案例可以看到整個效果真的是好多了,在現今眾多開發者推崇 flex 排版的情形下,float 技巧有如過街老鼠人人喊打,但其實只要用的巧用的好,float 可是非常好用的喔!float 本身就是在做文繞圖居多,所以這邊利用了 float 的基本特性就能完成了,而且我們也可以利用 float 所造成的 CSS BFC 特性做更多的變化與應用。

更多的應用

有了上面的效果之後,讓我們的設計更偏向平面設計風格看看,有時候我們會在放大的首字背後墊一個色塊,好更加的突顯那個放大的首字份量, 對於視覺焦點的營造也更加的清楚,既然是裝飾性的項目,那我們就可以利用僞類來做啦!我們可以在 p 標籤設定一個僞類,並利用定位的技巧來達到我們所要的目的。原始碼可以參考下面這樣

p::before{
  content:'';
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  background-color: #ccc;
  left: 0;
  top: -5px;
}

但是一但添加了絕對定位,這時候就會有「定位在哪個空間」內的問題,因為是每個段落的首字被放大,所以當然就是定在每個段落了,這時候父層給他添加一個相對定位就搞定啦,像是以下這段原始碼

p{
  font-size: 16px;
  line-height: 1.7;
  position: relative;
}

然後你又發現了!為何我的文字被蓋住了?如果你懂定位的特性的話,大概也會知道「具備定位設定的物件其層級會比沒有定位設定的物件高」,所以色塊蓋住了文字也是非常合理的,解決方式當然就是用另外一個定位設定更高的層級啦。所以我們需要這樣設定

p::first-letter{
  ...略
  /*添加下方兩行*/
  position: relative;
  z-index: 1;
}
p::before{
    ...略
    z-index: -1;
}

搞定!!真是漂亮多了!又或者你覺得這樣的效果不夠好,墊底色塊想增加圓角也可以啦,那就補個圓角設定給僞類就好囉。

p::before{
  ...略
  border-radius: 50%;
}

是不是非常有趣的玩法呢?各位有做過怎樣的設計呢?歡迎一起下方留言討論喔。

以上就是今天的 金魚都能懂的 CSS 選取器 - :first-letter 首字選取器,如果文中描述有誤歡迎各位前輩不吝指正,各位金魚我們明天見~

金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
:lang 語言僞類選取器 - 多長的單字都不煩惱
下一篇
::first-line 首行選取器 - 低調到不行的選取器
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
hinolin0309
iT邦新手 4 級 ‧ 2022-01-13 10:26:27

文章中說「在早期微軟的 IE 盛行的時代寫法會是 :first-letter」
同時在第一個案例中又寫道

p:first-letter{
	font-size:50px;
}

在codepen嘗試過後發現寫:first-letter和::first-letter好像沒什麼不同
想請問Amos老師,現行狀態下,一律寫::first-letter就好嗎(?
另外想請問既然是::開頭,::first-letter也是個偽元素囉,但偽元素不是要產生什麼東西嗎(還是我理解有誤QQ?

我要留言

立即登入留言